* {
    margin: 0;
    padding: 0;
}
html,
body {
    height: 100%;
    width: 100%;
    margin: 0;
}
.empty {
    display: flex;
    width: 100%;
    height: calc(100vh - 1rem);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    img {
        width: 4.14rem;
        height: 2.74rem;
    }
    p {
        font-size: .4rem;
        text-align: center;
        color: #888;
        margin-top: .4rem;
    }
}
.ui-people{
    display: block;
    width: 100%;
    padding: 0 .16rem;
    .ui-top{
        display: block;
        width: 100%;
        height: .96rem;
        padding: .16rem 0;
        margin-bottom: .16rem;
        .ui-top-item{
            display: block;
            float: left;
            height: .64rem;
            line-height: .64rem;
            font-size: .3rem;
            text-align: center;
            background-color: #fff;
            border-radius: .12rem;
            padding: .06rem;
            .ui-top-btn{
                display: block;
                width: 100%;
                height: 100%;
                line-height: .3rem;
                font-size: .3rem;
                color: #2F2F2F;
                text-align: center;
                background-color: #fff;
                border-radius: .1rem;
                border: none;
                outline: none;
            }
            .select{
                color: #fff;
                background-color: #9A57FF;
            }
        }
        .girl{
            width: 33.3%;
        }
        .boy{
            width: 50%;
        }
    }
}
.ui-list{
    display: block;
    width: 100%;
    padding: 0 .16rem;
    background-color: #efefef;
    .ui-list-item{
        display: block;
        float: left;
        width: 50%;
        height: 5rem;
        margin-bottom: .16rem;
        .ui-item{
            display: block;
            position: relative;
            width: 100%;
            height: 5rem;
            background-color: #fff;
            border-radius: .1rem;
            padding: .14rem;
            .ui-item-avatar{
                display: block;
                width: 100%;
                height: 3.2rem;
                margin-bottom: .16rem;
                background-color: #eee;
                background-position: center center;
                background-repeat: no-repeat;
                background-size: cover;
            }
            .ui-forbidden {
                display: block;
                width: 100%;
                height: 3.2rem;
                margin-bottom: .16rem;
                background-color: #000;
                text-align: center;
                color: #fff;
                line-height: 3.2rem;
            }
            .ui-item-follow{
                display: block;
                position: absolute;
                top: 0.3rem;
                right: 0.3rem;
                width: .6rem;
                height: .6rem;
                background-color: #fff;
                border-radius: .12rem;
            }
            .is-follow{
                background-color: red;
            }
            .ui-heart{
                display: block;
                position: absolute;
                top: .28rem;
                right: .28rem;
                width: .4rem;
                height: .4rem;
                background-color: #fff;
                border-radius: .1rem;
                background-position: center center;
                background-repeat: no-repeat;
                background-size: .24rem .24rem;
                background-image: url(../../image/station/ungood.png);
            }
            .like{
                background-image: url(../../image/station/good.png);
            }
            .ui-tap{
                display: block;
                position: absolute;
                top: 3.2rem;
                left: 50%;
                margin-left: -.5rem;
                width: 1rem;
                height: .32rem;
                line-height: .24rem;
                font-size: .24rem;
                color: #fff;
                padding-top: .04rem;
                text-align: center;
                border-radius: .06rem;
            }
            .girl{
                background-color: #F098EF;
            }
            .boy{
                background-color: #FFC016;
            }
            .ui-item-name{
                display: block;
                width: 100%;
                height: .6rem;
                line-height: .6rem;
                font-size: .3rem;
                color: #2F2F2F;
                text-align: center;
            }
            .ui-item-content{
                display: block;
                width: 100%;
                clear: both;
                padding: 0 .16rem;
                .ui-content-left{
                    display: block;
                    float: left;
                    height: .24rem;
                    line-height: .24rem;
                    font-size: .2rem;
                    color: #9C9C9C;
                    margin-bottom: .1rem;
                    span{
                        position: relative;
                        padding-right: .24rem;
                        &:after {
                            content: '';
                            display: block;
                            position: absolute;
                            top: .06rem;
                            right: .1rem;
                            width: 4px;
                            height: 4px;
                            border-radius: 2px;
                            background-color: #9C9C9C;
                        }
                    }
                }
                .ui-content-right{
                    display: block;
                    float: right;
                    height: .24rem;
                    line-height: .24rem;
                    font-size: .2rem;
                    color: #FFC016;
                    margin-bottom: .1rem;
                }
                .apply{
                    color: #16A5FF;
                }
            }
        }
        &:nth-child(2n + 1) {
            padding-right: .08rem;
        }
        &:nth-child(2n) {
            padding-left: .08rem;
        }
    }
}
.ui-boy{
    display: block;
    width: 100%;
    .ui-boy-item{
        display: block;
        position: relative;
        width: 100%;
        height: 2.08rem;
        margin-bottom: .16rem;
        background-color: #fff;
        padding: .4rem 1.12rem .4rem 2rem;
        .ui-boy-avatar{
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 1.38rem;
            height: 1.38rem;
            top: .34rem;
            left: .34rem;
            border-radius: 50%;
            background-color: #eee;
            border: 1px solid #eee;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
        }
        .ui-boy-forbidden {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 1.38rem;
            height: 1.38rem;
            line-height: 1.38rem;
            top: .34rem;
            left: .34rem;
            border-radius: 50%;
            background-color: #000;
            border: 1px solid #eee;
            color: #fff;
            text-align: center;
            font-size: .3rem;
        }
        .ui-boy-tap{
            display: block;
            position: absolute;
            top: .4rem;
            left: 1.36rem;
            width: .32rem;
            height: .32rem;
            line-height: .32rem;
            font-size: .24rem;
            color: #fff;
            border-radius: .16rem;
            background-color: #FFC016;
            text-align: center;
        }
        .ui-boy-content{
            display: block;
            width: 100%;
            clear: both;
            .ui-boy-name{
                display: block;
                float: left;
                position: relative;
                height: .4rem;
                line-height: .36rem;
                font-size: .36rem;
                color: #232323;
                padding-right: .54rem;
                &:after {
                    content: '';
                    display: block;
                    position: absolute;
                    top: .06rem;
                    right: .14rem;
                    width: .26rem;
                    height: .26rem;
                    background-position: center center;
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    background-image: url(../../image/station/man-icon.png);
                }
            }
            .ui-boy-left{
                display: block;
                float: left;
                height: .48rem;
                line-height: .48rem;
                font-size: .24rem;
                color: #9C9C9C;
                span{
                    position: relative;
                    padding-right: .24rem;
                    &:after {
                        content: '';
                        display: block;
                        position: absolute;
                        top: .12rem;
                        right: .1rem;
                        width: 4px;
                        height: 4px;
                        border-radius: 2px;
                        background-color: #9C9C9C;
                    }
                }
            }
        }
        .ui-boy-footer{
            display: block;
            float: left;
            width: 100%;
            height: .26rem;
            line-height: .26rem;
            font-size: .24rem;
            color: #9C9C9C;
        }
        .ui-boy-heart{
            display: block;
            position: absolute;
            bottom: .04rem;
            right: .04rem;
            width: 1rem;
            height: 1.4rem;
            background-color: #fff;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: .26rem .26rem;
            background-image: url(../../image/station/ungood.png);
            // background-color: blue;
            &:before {
                content: '';
                display: block;
                position: absolute;
                left: .12rem;
                top: .54rem;
                width: 1px;
                height: .3rem;
                background-color: #c2c2c7;
                transform: scale(0.5, 1);
                transform-origin: center center;
            }
        }
        .like{
            background-image: url(../../image/station/good.png);
        }
        .ui-boy-picture{
            display: block;
            position: absolute;
            z-index: 1;
            top: .48rem;
            right: .4rem;
            width: .4rem;
            height: .4rem;
            background-color: #fff;
            border-radius: .1rem;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: .26rem .26rem;
            background-image: url(../../image/me/gallery.png);
        }
    }

}